<template>
    <drop @drop="itemDrop(item)" class="float-item">
        <span @click="itemClick(item)">
            <el-button class="label" size="large" round>{{item.name}}</el-button>
            <img :src="item.icon ? `/api${item.icon}` : ''">
        </span>
    </drop>
</template>
<script>
/**
 * 浮动物品
 */
export default {
    name: 'float-item',
    props: ['item'],
    data: () => ({}),
    computed: {},
    methods: {
        itemDrop(item) {
            this.$emit('itemDrop', item)
        },
        itemClick(item) {
            this.$emit('itemClick', item)
        }
    }
}
</script>
<style lang="less">
.float-item {
    display: inline-block;
    position: relative;
    width: 200px;
    padding: 12px;
    .label {
        font-size: 24px;
        padding: 10px 60px 10px 10px !important;
        border: 3px solid #ff6900;
        width: 70%;
    }
    img {
        position: absolute;
        top: 0;
        left: 55%;
        background-color: white;
        width: 30%;
        border-radius: 50%;
        border: 3px solid #ff6900;
    }
}
</style>


